<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        form > label {
            display: block;
        }
    </style>
</head>
<body>
    <form action="#">
        <label for="account">
            <span>account: </span>
            <input name="account" id="account" type="text">
        </label>
        <label for="password">
            <span>password: </span>
            <input name="password" id="password" type="text">
        </label>
        <label for="email">
            <span>email: </span>
            <input name="email" id="email" type="text">
        </label>
        <label for="age">
            <span>age: </span>
            <input name="age" id="age" type="text">
        </label>
        <button type="submit" id="commit">提交</button>
    </form>

    <script>
        const commitBtn = document.querySelector('#commit')
        commitBtn.addEventListener('click', (event) => {
            event.preventDefault();

            let age = document.querySelector('label[for="age"] input').value
            const ageToNumber = parseInt(age)
            age = isNaN(ageToNumber) ? null : ageToNumber

            const data = {
                account: document.querySelector('label[for="account"] input').value,
                password: document.querySelector('label[for="password"] input').value,
                email: document.querySelector('label[for="email"] input').value,
                age
            }
            console.log(data)

            axios({
                method: 'post',
                url: '/api/v1/rest/users/register',
                data
            }).then((response) => {
                console.log(response.data)
            })
        })

        axios({
            method: 'post',
            url: '/api/v1/rest/users/export'
        }).then((response) => {
            console.log('/api/v1/rest/users/export: ', response)
        })
    </script>
</body>
</html>